<template>
  <el-drawer title="模版查看" :visible.sync="visible" :with-header="false" size="650px">
    <div class="right-container">
      <div class="container-header">
        <div style="font-size: 14px">模版查看</div>
        <div @click="handleClose">
          <i class="el-icon-close" style="font-size: 18px"></i>
        </div>
      </div>
      <div class="container-content background-color-grey padding-10">
        <div class="bg-white border-radius">
          <div class="padding-lg flex ">
            <div class="flex-1">标题名称：{{ dataForm.name }}</div>
          </div>
          <div class="padding-lg flex ">
            <div class="flex-1">封面图：
              <img :src="dataForm.thumbnail" alt="" style="width: 170px;height: 80px;"></img>
            </div>

          </div>
          <div class="padding-lg flex ">
            <div class="flex-1">业务编号：{{ dataForm.code }}</div>
            <div class="flex-1">业务类型：课程- {{ dataForm.type==1?'公需科目':'专业科目' }}</div>
          </div>
          <div class="padding-lg flex ">
            <div class="flex-1">发布时间：{{ dataForm.createTime }}</div>
            <div class="flex-1">讲师姓名：{{ dataForm.attributeName }}</div>
          </div>
        </div>
      </div>
    </div>

  </el-drawer>
</template>

<script>

export default {
  data() {
    return {
      dataForm: {},
      dataListLoading: false,
      tableHeaderStyle: { background: '#f5f7fa !important', height: '20px !important', padding: '4px !important' },
      direction: 'rtl',
      visible: false,
      dataList: []
    }
  },
  mounted() {
  },
  created() {
  },
  methods: {

    handleClose() {
      this.visible = false; // 关闭外层 Drawer 时不关闭内层 Drawer
    },
    init(id) {
      this.dataForm.id = id || 0
      //loading
      this.$loading({
        lock: true,
        text: "加载中",
        background: "rgba(0, 0, 0, 0.5)",
      });
      this.$http({
        url: this.$http.adornUrl(`/class/manage/info/${this.dataForm.id}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data)
          this.dataForm = Object.assign({}, this.dataForm, data.classManage)
        }
        this.$loading().close();
      }).catch((err) => {
        this.$loading().close();
      });
      this.visible = true;
    },
  }
}
</script>
<style>
.right-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.container-header {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px
}

.container-content {
  flex: 1;
}


.flex-container {
  display: flex;
  justify-content: space-between;
  /* 根据需要调整 */
}

.flex-item {
  flex: 1;
  /* 可以根据需要调整比例 */
  margin: 0 10px;
  /* 添加一些间距 */
}

.left-panel,
.right-panel {
  /* 在这里添加任何特定的样式，比如背景色、边框等 */
}

.el-tabs--border-card>.el-tabs__content {
  padding: 10px 0;
}
</style>
